<template>
  <div class="panel">
    <div class="title">{{ title }}</div>
    <el-table :data="tableData" stripe lazy>
      <el-table-column
        v-for="item in Object.keys(tableData[0] || {})"
        :key="item"
        :prop="item"
        :label="item"
      >
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      tableData: [],
      title: "",
    };
  },
  watch: {
    "$store.state.optionTable": {
      handler: function (val) {
        this.title = val.baseOption.title.show ? val.baseOption.title.text : "";
      },
      deep: true,
    },
    "$store.state.sqlData": {
      handler: function (sqlData) {
        this.tableData = sqlData;
      },
      deep:true
    },
    "$store.state.sqlHandleData": {
      handler: function (sqlData) {
        this.tableData = sqlData;
      },
    },
  },
  created() {},
  mounted() {
    const optionTable = this.$store.getters.getOptionTable;
    this.title = optionTable.baseOption.title.show
      ? optionTable.baseOption.title.text
      : "";

    this.tableData = this.$store.getters.getSQLData;
  },
  methods: {},
};
</script>
<style lang="less" scoped>
.panel {
  height: 100%;
  /deep/.el-tabs__item {
    color: rgba(255, 255, 255, 0.3);
  }

  .title {
    font-size: 16px;
    text-align: center;
    height: 10%;
    width: 100%;
    color: #606266;
    background-color: #fff;
  }

  /deep/.el-table {
    width: 100%;
    height: 90%;
    overflow: auto;
  }
}
</style>
